<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>云收藏</title>
	<meta charset="utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<form name="favForm" method="post" action="/cang/fav.do;jsessionid=FF8C0487A99814B144B07E5633524A0F">
	<input type="hidden" name="op" value="toList" />

	<div class="banner" valign="top">云收藏</div>

	<table cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td style="text-align:right;" valign="top">
				<!-- 左边Tag列表 -->
				<div class="left_labels" >


					<table class="labels_table" cellspacing="0" cellpadding="0" border="0">
						<tr><td><a href="#" @click="add();" style="font-weight:bold;">添加书签</a></td></tr>
						<tr>
<!--							class="selected_label"-->
							<td :class="{ selected_label : '全部'==currentLabel}"
								@click="currentLabel = '全部'">
								<a @click.prevent="showAll" href="fav.do?op=toList&type=-1">全部</a>
							</td>
						</tr>
						<tr>
							<td :class="{ selected_label : '未分类'==currentLabel}"
								@click="currentLabel = '未分类'">
								<a @click.prevent="showByftags" href="fav.do?op=toList&type=0">未分类</a>
							</td>
						</tr>




						<tr v-for="tag in tags">
							<td :class="{ selected_label : tag.tname==currentLabel}"
								@click="currentLabel = tag.tname">
								<a @click="showFavs(tag)" href="#">{{tag.tname}}</a></td>
						</tr>


						<tr>
							<td :class="{ selected_label : '云图'==currentLabel}"
								@click="currentLabel = '云图'">
								<a @click.prevent="showFavs(null)" style="font-weight:bold;" href="fav.do?op=toCloud">云图</a>
							</td>
						</tr>
					</table>
				</div>
			</td>
			<td>
				<!-- 右边fav内容 -->
				<div v-if="divStatus == 1" class="content_links">

					<div v-for="fav in currentTag.favorites" style="padding:6px 10px;">
						<div>
							<a href="'http://'+fav.furl" style="color:blue;font-size:18px;" target="_blank">
								{{fav.flabel}}
							</a>
						</div>
						<div style="color:black;font-size:16px;">
							{{fav.fdesc}}
						</div>
						<div style="color:green;font-size:14px;">
							http://{{fav.furl}}
						</div>
					</div>
				</div>

				<div v-if="divStatus == 2" class="content_links">
					<span v-for="tag in tags" :style="{ fontWeight: tag.weight }">
						{{tag.tname}}
					</span>
				</div>
			</td>
		</tr>
	</table>

	<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
		<el-form :model="form">
			<el-form-item label="名称" label-width="100">
				<el-input v-model="form.flabel" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="地址" label-width="100">
				<el-input v-model="form.furl" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="描述" label-width="100">
				<el-input v-model="form.fdesc" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="分类" label-width="100">
				<el-input v-model="form.ftags" autocomplete="off"></el-input>
			</el-form-item>

		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="save()">确 定</el-button>
		</div>
	</el-dialog>

</form>
<script>
	var v = new Vue({
		el : "form",
		data : {
			tags : [],
			currentTag : {},
			divStatus : 1,  // div 显示状态，1 显示连接地址，2 显示云图
			currentLabel : "", // 当前点击的标签
			dialogFormVisible : false,
			form : {}
		},
		created(){
			this.query();
		},
		methods : {
			showByftags(){
				axios.get("ftags.do").then( res => {
					this.currentTag.favorites = res.data;
				});
			},
			query() {
				axios.get("query.do").then( res => {
					this.tags = res.data;
					let max = 0;
					this.tags.forEach( t => {
						if (t.tcount>max){
							max = t.tcount;
						}
					});
					this.tags.forEach( t => {
						let i = parseInt( t.tcount / max * 9);
						i *= 100;
						t.weight = i;
					})

				});
			},
			showFavs(tag){
				if (tag){
					this.divStatus = 1;
					this.currentTag = tag;
				} else {
					// tag 为null 显示云图
					this.divStatus = 2;
				}
			},
			showAll(){
				this.divStatus = 1;
				// 不能改写 tag 的链接的数据
				// this.currentTag.favorites = this.all;
				// 重新创建一个 tag 包含所有的链接
				this.currentTag = { favorites :　this.all };

			},
			add(){
				this.dialogFormVisible = true;
			},
			save(){
				var p = new URLSearchParams();
				p.append("flabel", this.form.flabel);
				p.append("furl", this.form.furl);
				p.append("fdesc", this.form.fdesc);
				p.append("ftags", this.form.ftags);
				axios.post("add.do",p).then(res=>{
					// alert(res.data.msg);
					// console.info(res.data.data);
					if (res.data.code == 1){
						this.$message(res.data.msg);
						this.dialogFormVisible = false;
						this.query();
					} else {
						this.$alert(res.data.msg)
					}
				})
			}
		},
		computed:{
			// 计算属性
			all(){
				let a = [];
				this.tags.forEach( t => {
					t.favorites.forEach( f => {
						a.push(f);
					})
				});
				return a;
			}
		}
	})
</script>

</body>
</html>